<template>
  <div>
    按钮
    <el-row>
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加角色</el-button
      >
    </el-row>
    <hr />
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.region" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.prevent="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click.prevent="addFn">确认</el-button>
      </span>
    </el-dialog>
    <!-- 表单 -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="#" width="180" ref="lookid"></el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
        ></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" icon="el-icon-edit" 
              @click="writeFn(row.id)" >编辑{{row.id}}</el-button
            >
            <el-dialog
              title="编辑角色"
              :visible.sync="dialogVisible"
               width="30%"
              :before-close="handleClose">
                <div>
                <p>角色名称</p>
                <input type="text" v-model="form.name" class="inp">
              </div>
              <div>
                <p>角色类型</p>
                <input type="text"  v-model="form.region" class="inp">
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click.prevent="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.prevent="changeFn()">确 定</el-button>
              </span>
            </el-dialog>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delFn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getListAPI, addListAPI } from "@/api";
// import axios from "./utils/request";
export default {
  mounted () {
    getListAPI()
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      tableData: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      username:'',
      usertype:'',
      // formLabelWidth: '120px'
    };
  },
  async created() {
    // const res = await getListAPI();
    // // console.log(res.data.data);
    // this.tableData = res.data.data;
    this.getManList()
  },
  methods: {
    writeFn(id){
      this.dialogVisible = true
      this.indexid=id
    },
    async getManList(){
      const res = await getListAPI();
    // console.log(res.data.data);
    this.tableData = res.data.data;
    },
    async changeFn(){
      this.dialogVisible = false
      // this.indexid=id
      if (this.form.name.trim().length === 0 && this.form.region.trim().length === 0) {
        return alert('输入内容不能为空!')
      }
      console.log(this.indexid);
      const res4=await axios({
            url: `/roles/${this.indexid}`,
            method: "put",
            data:{
              roleName:this.form.name,
              roleDesc:this.form.region,
            }
            
          });
        console.log(res4);
        this.getManList()
    },
    async addFn() {
      if (this.form.name.trim().length === 0&&this.form.region.trim().length === 0) {
        return alert('输入内容不能为空!')
    }
      this.dialogFormVisible = false;
      const res2 = await addListAPI({
        roleName: this.form.name,
        roleDesc: this.form.region,
      });
      const res = await getListAPI();
      this.tableData = res.data.data;
      this.form.name = "";
      this.form.region = "";

      // console.log(this.tableData);
      // console.log(res2.data.data);
      // this.tableData=res2.data.data
    },
    delFn(id) {
      this.indexid=id
      // console.log(this.indexid);
      this.$confirm("此操作经永久删除该角色,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {          
          setTimeout(()=>{
            console.log(this.indexid);
            axios({
            url: `/roles/${this.indexid}`,
            method: "delete",
          },0)
          this.getManList()
          });
          this.$message({
            type: "success",
            message: "删除角色成功!",
          });
          this.getManList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        })
        .finally(()=>{
          // console.log(123);
          this.getManList()
        })     
    },
   
    // async delFn(id){
    //   const res3 = await axios ({
    //      url:`/roles/${id}`,
    //     method:'delete',
    //   })
    //   console.log(res3);
    //   const res = await getListAPI();
    //   this.tableData = res.data.data;
    // }
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
  },
    
};
</script>

<style  scoped>
.inp {
  width: 90%;
  font-size: 22px;
}
</style>
